import {FC, MutableRefObject, useCallback, useEffect, useRef, useState} from 'react';
import Request from "@/service/request";
import HoverTooltip from "@/components/HoverTooltip";
import DialogApi from '@/views/system/permission/components/DialogApi'
import {Button, Card, Form, Input, Select, Space, Table, TableColumnsType, Tag} from "antd";
import {PlusOutlined, SearchOutlined, SyncOutlined} from "@ant-design/icons";
import {usePagination} from "@/hooks/modules/usePagination";
import {useImmer} from "use-immer";
import {filterParams} from "@/utils";


//状态
const statusList = [
    {name: '启用', value: 1},
    {name: '禁用', value: 0},
]
const Permission: FC = () => {

    const [form] = Form.useForm();
    //获取弹窗组件实例
    const DialogApiRef: MutableRefObject<any> = useRef(null)
    //列表状态
    const [dataList, setDataList] = useState<any[]>([])
    //分页总数
    const [total, setTotal] = useState<number>(0)
    //查询条件数据
    const [searchForm, setSearchForm] = useImmer<Record<string, any>>({pageNo: 1, pageSize: 10});


    //列表结构
    const columns: TableColumnsType<any> = [
        {
            title: '权限名称',
            dataIndex: 'permissionName',
            align: 'center',
            width: 300,
            ellipsis: {showTitle: false},
            render: (text: string | number) => <HoverTooltip title={text}>{text}</HoverTooltip>
        },
        {
            title: '接口地址',
            dataIndex: 'urls',
            align: 'center'
        },
        {
            title: '服务名称',
            dataIndex: 'serviceName',
            align: 'center'
        },
        {
            title: '状态',
            dataIndex: 'status',
            align: 'center',
            render: (_: string | number, row: Record<string, any>) => {
                if (row.status !== 0 && !row.status) return _
                return <Tag color={row.status === 1 ? 'success' : 'error'}>{row.status === 1 ? '启用' : '禁用'}</Tag>
            }
        },
        {
            title: '创建时间',
            dataIndex: 'createAt',
            align: 'center'
        },
        {
            title: '操作',
            key: 'operation',
            align: 'center',
            width: 200,
            fixed: 'right',
            render: (_: string | number, row: Record<string, any>) => {
                return <Button type="link" size="small"
                               onClick={() => DialogApiRef.current?.showModal(2, row)}>编辑</Button>
            }
        }
    ]

    useEffect(() => {
        const initialize = async () => {
            const resp = await Request.post('/permissionList', searchForm)
            setDataList(resp.data.list)
            setTotal(resp.data.total)
        }
        initialize()
    }, [searchForm])

    //触发分页查询
    const pageOnChange = (page: number, pageSize: number) => {
        setSearchForm(draft => {
            draft.pageNo = page
            draft.pageSize = pageSize
        })
    }

    //重置查询条件
    const onReset = () => {
        form.resetFields()
        setSearchForm({pageNo: 1, pageSize: 10})
        setTotal(0)
    };

    //查询列表
    const onFinish = (values: any) => {
        setSearchForm({...searchForm, ...filterParams(values)})
    };

    //子组件触发刷新列表
    const refresh = useCallback(() => {
        setSearchForm({...searchForm})
    }, [])

    return (
        <>
            {/*查询栏部分*/}
            <Card title="权限管理" bordered={false} style={{width: '100%'}}>
                <Form form={form} layout="inline" onFinish={onFinish}>
                    <Space size="large">
                        <Form.Item label="权限名称" name="permissionName">
                            <Input placeholder="请输入权限名称" allowClear style={{width: '200px'}}/>
                        </Form.Item>
                        <Form.Item label="状态" name="status">
                            <Select placeholder="请选择状态" allowClear style={{width: '200px'}}>
                                {statusList.map(v =>
                                    <Select.Option key={v.name} value={v.value}>{v.name}</Select.Option>)}
                            </Select>
                        </Form.Item>
                        <Form.Item>
                            <Space size="large">
                                <Button type="primary" htmlType="submit" icon={<SearchOutlined/>}>查询</Button>
                                <Button htmlType="button" icon={<SyncOutlined/>} onClick={onReset}>重置</Button>
                            </Space>
                        </Form.Item>
                    </Space>
                </Form>
            </Card>
            {/*列表部分*/}
            <Card title="列表展示" bordered={false} style={{width: '100%', marginTop: '20px'}}
                  extra={<Button type="primary" icon={<PlusOutlined/>}
                                 onClick={() => DialogApiRef.current?.showModal(1)}>新增权限</Button>}>
                <Table columns={columns} rowKey="id" bordered
                       pagination={usePagination(searchForm, total, pageOnChange)}
                       dataSource={dataList}/>
            </Card>
            {/*新增或编辑权限弹窗*/}
            <DialogApi ref={DialogApiRef} refresh={refresh}/>
        </>
    );
};

export default Permission;
